<%@ page contentType="text/html; charset=utf-8" import="java.util.List,java.util.Stack,com.wit.po.Area,com.wit.dao.impl.AreaDaoImpl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户区域设置</title>
<link href="../style/main.css" rel="stylesheet" type="text/css" />
<style>
body#bodyTree{margin:8px;font-size:12px;color:#000;line-height:22px;}
body#bodyTree a{color:#000;text-decoration:none;}
body#bodyTree a:hover{color:#3366CC;padding:2px 0px 0px 0px;}
#bodyTree ul{margin:0;padding:0;list-style:none;background:url(../images/tree/ullist.gif) repeat-y;}
#bodyTree ul li{list-style:none;}
#bodyTree .treeview li{background:transparent url(../images/tree/list.gif) no-repeat left center;padding-left:15px;/*tree list*/}
#bodyTree .treeview li.submenu{background:transparent url(../images/tree/closed.gif) no-repeat left 0px;/*4 sub menu*/}
#bodyTree .treeview li.closefolder{background:transparent url(../images/tree/closed.gif) no-repeat left 0px;/*closefolder style*/}
#bodyTree .treeview li.openfolder{background:transparent url(../images/tree/open.gif) no-repeat left 0px;/*openfolder style*/}
#bodyTree .treeview li.submenu ul{display:none;}
#bodyTree ul li a.cur{font-weight:bold;color:#3366CC;padding:2px 2px 0px 2px;/*the current style*/}
#bodyTree .treeview .submenu i{width:12px;height:12px;font-style:normal;font-size:10px;margin-left:-15px;margin-top:5px;float:left;display:inline;background:url(../images/tree/transparent.gif) no-repeat center; cursor:pointer;}
</style>
<script type="text/javascript" src="../images/tree/simpletreemenu.js"></script>
<script type="text/javascript">
	function selectCurNode(id)
	{
		document.getElementById("areaId").value = id;
		alert(document.getElementById("areaId").value);
	}
	function startEdit(modeFlag)
	{
		var id = document.getElementById("areaId").value;
		if(modeFlag)			//新增
		{
			if(id != null && id.length > 0)
				document.getElementById("editIFrame").src="./clientLocale_new.jsp?supAreaId="+id;
			else
				document.getElementById("editIFrame").src="./clientLocale_new.jsp";
				
			document.getElementById("editAreaDiv").style.display="";
		}
		else if(id == null || id.length < <%= Area.STEP_LEN_OF_LEVEL %>)
		{
			alert("必须先选择一个区域");
		}
		else						//修改
		{
			document.getElementById("editIFrame").src="area!startEdit?areaId="+id;
			document.getElementById("editAreaDiv").style.display="";
		}
	}
	
	function removeCurNode()
	{
		var id = document.getElementById("areaId").value;
		if(id == null || id.length <= 0)
		{
			alert("必须先选择一个区域");
			return;
		}
		if(confirm("确定删除？"))
			document.location = "area!removeArea?areaId="+id;
	}
	
</script>

</head>
<body id="bodyTree">
<table width="1000" align="left" cellpadding="0" cellspacing="0" class="table">
  <tr>
    <td>
      <table width="100%"cellpadding="0" cellspacing="0" class="table2">
        <tr>
          <td valign="top">
            <table width="100%" class="top" cellpadding="0" cellspacing="0">
              <tr>
                <td>当前位置:&nbsp;客户管理&nbsp;>>&nbsp;区域设置</td>
              </tr>
            </table>
            <div class="search" style="padding:10px">
      		<table width="100%" cellpadding="0" cellspacing="0"class="table3">
                  <tr>
                      <td width="6%" class="title">&nbsp;</td>
                      <td width="5%" ><span class="clientinfo_but"><a onclick="javascript:startEdit(true);" href="javascript:void(0);" target="_self">新&nbsp;增</a></span></td>
                      <td width="5%" ><span class="clientinfo_but"><a onclick="javascript:startEdit(false);" href="javascript:void(0);" target="_self">修&nbsp;改</a></span></td>
                      <td width="5%" ><a onclick="javascript:removeCurNode();" href="javascript:void(0);"><img src="../images/btn_del.gif" alt="3" width="50" height="20" /></a></td>
                      <td width="18%" >&nbsp;</td>
                      <td width="5%" ><span class="clientinfo_but">导&nbsp;入</span></td>
                      <td width="5%" ><span class="clientinfo_but">导&nbsp;出</span></td>
                    
                      <td width="5%" ><span class="clientinfo_but">打&nbsp;印</span></td>  
                      <td width="14%" >&nbsp;</td>
                  </tr>
              </table>
              <table cellpadding="0" cellspacing="0" width="100%" class="table5">
                <tr>
                    <th height="29" colspan="2" bgcolor="#BBD2F7" class="title">客户区域列表</th>
             	</tr>
                  <tr>
                   <td valign="top" align="left" width="40%" height="400">
            <div id="treeDiv" style="WIDTH: 400px; HEIGHT: 400px; OVERFLOW-Y: auto; OVERFLOW-X: auto; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color: #F8ECD8; scrollbar-track-color: #F8ECD8; scrollbar-arrow-color: #885C10">
			<ul id="areaTree" class="treeview">
			<li>
				<strong>所有区域</strong> 
				<a href="javascript:ddtreemenu.flatten('areaTree', 'expand')">
					<strong>展开</strong>
				</a>
				<a href="javascript:ddtreemenu.flatten('areaTree', 'contact')">
					<strong>收缩</strong>
				</a>
			</li>
				<%
					List<Area> areaList = AreaDaoImpl.s_GetAreaList();
					if(areaList != null && areaList.size() > 0)
					{
						Area area = areaList.get(0);
						Stack<Integer> areaStack = new Stack<Integer>();
						int listSize = areaList.size();
						int i = 1,tmp;
						if(1 < listSize && area.isParentOf(areaList.get(1)))
							out.print("<li><i></i><a href=\"javascript:void(0)\" onclick=\"javascript:selectCurNode(\'"+area.getAreaId()+"\');\">"+area.getAreaId()+"-"+area.getAreaName()+"</a>\n<ul>\n");
						else
							out.print("<li><i></i><a href=\"javascript:void(0)\" onclick=\"javascript:selectCurNode(\'"+area.getAreaId()+"\');\">"+area.getAreaId()+"-"+area.getAreaName()+"</a>\n");
						areaStack.push(0);
						while(i<listSize)
						{
							area = areaList.get(i);
							if(areaStack.empty() || areaList.get(areaStack.peek()).isParentOf(area))
							{
								if(i+1<listSize && area.isParentOf(areaList.get(i+1)))
									out.print("<li><i></i><a href=\"javascript:void(0)\" onclick=\"javascript:selectCurNode(\'"+area.getAreaId()+"\');\">"+area.getAreaId()+"-"+area.getAreaName()+"</a>\n<ul>\n");
								else
									out.print("<li><i></i><a href=\"javascript:void(0)\" onclick=\"javascript:selectCurNode(\'"+area.getAreaId()+"\');\">"+area.getAreaId()+"-"+area.getAreaName()+"</a>\n");
								areaStack.push(i);
								i++;
							}
							else
							{
								tmp = areaStack.pop();
								if(tmp+1<listSize && areaList.get(tmp).isParentOf(areaList.get(tmp+1)))
									out.print("</ul>\n</li>\n");
								else
									out.print("</li>\n");
							}
						}
						while(!areaStack.empty())
						{
							tmp = areaStack.pop();
							if(tmp+1<listSize && areaList.get(tmp).isParentOf(areaList.get(tmp+1)))
								out.print("</ul>\n</li>\n");
							else
								out.print("</li>\n");
						}
					}
				%>
				</ul>
				<input type="hidden" name="areaId" id="areaId" value=""/>
				
				<script type="text/javascript">
					ddtreemenu.createTree("areaTree", true);
					ddtreemenu.flatten('areaTree', 'contact');
				</script>
		</div>
		</td>
		<td valign="top">
		<div id="editAreaDiv">
			<iframe id="editIFrame" scrolling="no" frameborder="0" width="100%" height="300"></iframe>
		</div>
				   </td>
				  </tr>
            </table>

            </div>

</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>
